<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>抖音风故障css</title>
    <style>
        body{
            background: #111;
        }
    
        .move-line{
            z-index: 4;
            position: absolute;
            width: 100%;
            height: 6px;
            background: #111;
            bottom: 100px;
            animation: moveLine cubic-bezier(0.3, -0.18, 0.135, 0.045) 1.5s infinite;
        }

        @keyframes moveLine{
            0%{bottom:0px;}
            18%{bottom: 100px;}
            25%{bottom: 0px;}
            30%{bottom: 10px;}
            31%{bottom: 11px;}
            32%{bottom: 12px;}
            40%{bottom: 50px;}
            50%{bottom: 0;}
            60%{bottom: 30px;}
            63%{bottom: 26px;}
            65%{bottom: 32px;}
            75%{bottom:80px}
            80%{bottom: 100px;}
            100%{bottom: 0px;}


        }

        .box{
            /* box-sizing: border-box; */
            position: relative;
            margin: 0 auto;
            width: 500px;
            overflow: hidden;
            /* height: 300px; */
            /* border: 1px solid sandybrown; */
            /* transform: scale(2.1); */
            font-size: 100px;
            color: transparent;
            /* text-align: center; */
        }
        .box::after{
            content: attr(data-cover);
            position: absolute;
            top: 1px;
            left: 2px;
            /* overflow: hidden; */
            height: 100px;
            color: cyan;
            mix-blend-mode: lighten;
            filter: contrast(200);
            animation: cyanMove cubic-bezier(0.7, -0.28, 0.035, 0.045) 0.8s infinite;

        }
        .box::before{
            content: attr(data-cover);
            position: absolute;
            top: -2px;
            left: -3px;
            /* overflow: hidden;     */
            height: 100px;
            color: rgb(230, 23, 102);
            /* text-shadow: 1px 0 0  crimson ; */
            mix-blend-mode: lighten;
            animation: redMove cubic-bezier(0.7, -0.28, 0.035, 0.045) 0.8s infinite;
            filter: contrast(200);
        }

        @keyframes redMove {
            10%{top: 0px;left: -1px;}
            20%{top:2px;left: 1px;}
            30%{top: -2px;left: 1px;}
            50%{top: -1px;left:-2px ;}
            70%{top: 2px;left: -3px;}
            80%{top: 3px;left: 1px;}
            100%{top: -2px;left: -3px;}
        }
        @keyframes cyanMove {
            10%{bottom: 0px;right: -1px;}
            20%{bottom:2px;right: 1px;}
            30%{bottom: -2px;right: 1px;filter: blur(1px);}
            50%{bottom: -1px;right:-2px ;filter: blur(0px);}
            70%{bottom: 2px;right: -3px;}
            80%{bottom: 3px;right: 1px;filter: blur(1px);}
            100%{bottom: -2px;right: -3px;}
        }
 
 

    </style>
</head>
<body>

    <div class="box" data-cover="TikTok">TikTok
    <div class="move-line"></div>


    </div>

    
</body>
</html>